<template>
	<div style="text-align: left">
		<el-button class="add-button" type="primary" @click="dialogFormVisible = true">添加</el-button>
		<el-dialog
				title="添加新闻"
				:visible.sync="dialogFormVisible"
				@close="clear">
			<el-form :model="form" :rules="rules" style="text-align: left;width:80%;" ref="form">
				<el-table-column
						prop="id"
						label="id"
						hidden
						style="text-align: center"
						width="50">
				</el-table-column>
				
				<el-form-item label="新闻标题" :label-width="formLabelWidth" prop="title">
					<el-input v-model="form.title" autocomplete="off" placeholder=""></el-input>
				</el-form-item>
				<el-form-item label="发布日期" :label-width="formLabelWidth" prop="date">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.date"
										style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="1">—</el-col>
					<el-col :span="11">
						<el-time-picker placeholder="选择时间" v-model="form.date" style="width: 100%;"></el-time-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="作者/来源" :label-width="formLabelWidth" prop="author">
					<el-input v-model="form.author" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="新闻链接" :label-width="formLabelWidth" prop="url">
					<el-input v-model="form.url" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="简介" :label-width="formLabelWidth" prop="abs">
					<el-input type="textarea" v-model="form.abs" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="图片" :label-width="formLabelWidth" prop="cover">
					<el-input v-model="form.cover" autocomplete="off" placeholder="图片 URL"></el-input>
					<img-upload @onUpload="uploadImg" ref="imgUpload"></img-upload>
				</el-form-item>
				
				<el-form-item prop="id" style="height: 0">
					<el-input type="hidden" v-model="form.id" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="onSubmit('form')">提交</el-button>
				<el-button @click="resetForm('form')">重置</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
    import ImgUpload from './ImgUpload'
    export default {
        name: 'EditForm',
           components: {ImgUpload},
        data () {
            return {
                dialogFormVisible: false,
                form: {
                    id: '',
                    title: '',
                    author: '',
                    date: '',
                    url: '',
                    cover: '',
                    abs: '',
                },

                formLabelWidth: '100px',
                rules: {
                    title: [{required: true, message: '标题不能为空', trigger: 'blur'}],
                    author: [{required: true, message: '作者/来源不能为空', trigger: 'blur'}],
                    date: [{required: true, trigger: 'blur'}],
                    url: [{required: true, message: '新闻链接不能为空', trigger: 'blur'}],
                    abs: [{message: '标题不能为空', trigger: 'blur'}],
                }
            }
        },
        methods: {
            clear () {
				this.$refs.imgUpload.clear()
                this.form = {
                    id: '',
                    title: '',
                    author: '',
                    dat2: '',
                    url: '',
                    cover: '',
                    abs: ''
                }
            },
            onSubmit (formName) {
                const _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        _this.$http
                            .post('/news/save', this.form).then(resp => {
                            if (resp.data == "success") {
                                _this.$alert('新闻添加成功！', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        this.dialogFormVisible = false
                                    }
                                })
                            }
                        })
                    }
                    else {
                        return false;
                    }
                })
            },
            resetForm (formName) {
                this.$refs[formName].resetFields();
            },
            uploadImg () {
                this.form.cover = this.$refs.imgUpload.url
            }
        }
    }
</script>

<style scoped>
	.add-button {
		margin: 18px 0 0 10px;
	}
</style>
